<html>
<head>
  {include file='common@base/meta'}
  <style>
  </style>
</head>
<body class="hold-transition">
<section class="content" id="content">

  <div id="users" class="box box-primary">
    <div class="box-header with-border">
      <h5 class="box-title">选择</h5>
      <div class="box-tools pull-right">
        <span>管理员已设置考场最大人数为{{userCpacity}}人</span>
        <button type="button" class="btn btn-xs btn-success" @click="selectClassAll">全部选中</button>
        <label class="label label-info">已选：
          <span>{{userSelectLength}}</span>
          <span> / </span>
          <span>{{capacity}}</span>
        </label>
      </div>
    </div>
    <div class="box-body checkbox users">
      <ul class="list-inline" style="width:100%">
        <li style="min-width: 30%;" v-for="(item,index) in items.users">
          <label><input type="checkbox" v-model="userSelect[index]" class="user_select" :value="item.id">
            <span class="userinfo">
              <span class="username">{{item.realname}}</span>
              <span class="userno"></span>
            </span>
          </label>
        </li>
      </ul>
    </div>
  </div>

</section>
</body>
{include file='common@base/footer-js'}
<script>
  require(["vue"], function (Vue) {
    var obj = new Vue({
      el: "#users",
      data: {
        items: {users: {$users}},
        userLength: 0,
        userSelect: [],
        userSelectLength: 0,
        userCpacity: {$userCpacity},
        capacity: 0,
      },
      created: function () {
        var users = this.items.users;
        var arr = Object.keys(users);
        this.userLength = arr.length;
        this.capacity = (this.userLength > this.userCpacity) ? this.userCpacity : this.userLength;
        //console.log(this.items.users);
      },
      watch: {
        userSelect: function () {
          var that = this, userSelect = this.userSelect, count = 0;
          Object.keys(userSelect).forEach(function (key) {
            if (userSelect[key] === true) {
              count += 1;
            }
          });
          console.log(count);
          this.userSelectLength = count;
        }
      },
      methods: {
        selectClassAll: function () {
          var arr = Object.keys(this.items.users);
          var length = arr.length;
          var userSelect = this.userSelect;
          var capacity = this.capacity;
          //先取消
          Object.keys(userSelect).forEach(function (key) {
            userSelect[key] = false;
          });
          //再设置
          for (var i = 0; i < capacity; i++) {
            Vue.set(this.userSelect, i, true);
          }
        },
      },
    });
  });

  /*
  $(function () {


    var $users = $(".users"), total = 0;

    $users.each(function (i, obj) {
      console.log('count');
      count_users($(obj));
    });

    function count_users(obj) {
      var dept_objs = obj.find(".user_select:checked");
      total = $(".user_select:checked").length;
      obj.prev(".heading").find(".js-user-count").text(dept_objs.length);
      $(".js-user-total").text(total);
      return dept_objs.length;
    }

    $(".user_select").on("change", function () {
      var me = $(this), dept_objs = me.parents(".users").find(".user_select:checked"),
        objs = $(".user_select:checked"), length = count_users(me.parents(".users"));
      console.log(length);
    });
    $(".js-all-checked").on("click", function () {
      var me = $(this), users = $(".users"), checkboxes = users.find("input:checkbox:visible");
      if (me.text() == '全部选中') {
        checkboxes.prop("checked", true);
        me.text('全部取消');
      } else {
        checkboxes.prop("checked", false);
        me.text('全部选中');
      }
      users.each(function (i, obj) {
        count_users($(obj));
      });

    });
    $(".js-dept-checked").on("click", function () {
      var me = $(this), heading = me.parents(".box-header with-border"),
        users = heading.next(".users"),
        checkboxes = users.find("input:checkbox:visible");
      if (me.text() == '全部选中') {
        checkboxes.prop("checked", true);
        me.text('全部取消');
      } else {
        checkboxes.prop("checked", false);
        me.text('全部选中');
      }
      count_users(users);
    });
*/
  /**
   * 查看已选
   */

  /*
  $(".js-show-checked").on("click", function () {
    var me = $(this), boxes = $(".box")
      , checkboxes = boxes.find("input:checkbox")
      , checked = boxes.find("input:checked")
    ;

    if (me.text() == "查看已选") {
      checkboxes.parents("li").addClass("hide");
      checked.parents("li").removeClass("hide");
      boxes.each(function (i, obj) {
        if ($(obj).find("input:checked").length == 0) {
          $(obj).addClass("hide");
        }
      });
      me.text("查看所有");
    } else {
      checkboxes.parents("li").removeClass("hide");
      dept_select($(".js-department_select"));
      me.text("查看已选");
    }
  });

  $("body").on("change", ".js-department_select", function () {
    dept_select($(this));
  });

  function dept_select(obj) {
    var me = obj,
      boxes = $(".box"),
      dept_id = me.val(),
      selected = $("div[data-dept='" + dept_id + "']"),
      selected_parent = $("div[data-dept-parent='" + dept_id + "']");
    console.log(dept_id);
    if (dept_id > 1) {
      boxes.addClass("hide");
      //headings.next(".users").addClass("hide");
      selected.removeClass("hide");
      selected_parent.removeClass("hide");
    } else {
      boxes.removeClass("hide");
    }
  }

  $(".js-search-username").on("keyup", function () {
    var users = $(".users")
      , box = $(".box")
      , lis = users.find("li")
      , me = $(this)
      , text = me.val().trim()
      , selected = users.find("li:contains('" + text + "')")
    ;
    console.log(text);
    if (text.length == 0) {
      lis.removeClass("hide");
      dept_select($(".js-department_select"));
    } else {
      lis.addClass("hide");
      selected.removeClass("hide");
      box.addClass("hide");
      selected.each(function (i, obj) {
        $(obj).parents(".box").removeClass("hide");
      });
    }
  });
});
*/
</script>
</body>
</html>
